<template>
  <div class="center-panel">
    <dv-border-box-8 class="video-box">
      <div class="video-feed">
        <Player @capture-success="handleCapture"/>
      </div>
    </dv-border-box-8>
    <dv-border-box-8 class="model-box">
      <div class="model-view">
        <!-- 左侧当前抓拍 -->
        <div class="current-capture">
          <div v-if="captureInfo.url" class="capture-image">
            <img :src="captureInfo.url" alt="当前抓拍" />
            <div class="capture-info">
              <span class="capture-time">{{ captureInfo.time }}</span>
            </div>
          </div>
          <div v-else class="no-capture">
            <el-empty description="暂无抓拍">
              <template #image>
                <el-icon :size="40"><Camera /></el-icon>
              </template>
            </el-empty>
          </div>
        </div>
        
        <!-- 右侧历史抓拍 -->
        <div class="history-captures">
          <div class="history-title">历史抓拍</div>
          <div class="history-list">
            <div v-for="(img, index) in historyImages" 
                 :key="index" 
                 class="history-item"
                 @click="showFullImage(img)">
              <img :src="img.imageUrl" :alt="'历史抓拍' + index" />
              <div class="history-time">{{ formatTime(img.timestamp) }}</div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-8>
  </div>
</template>

<script setup>
import Player from '@/components/Player.vue'
import { ref, onMounted } from 'vue'
import { Camera } from '@element-plus/icons-vue'
import { get } from '@/utils/request'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

const captureInfo = ref({
  url: '',
  time: ''
})

const historyImages = ref([])

// 获取历史图片
const fetchHistoryImages = async () => {
  try {
    const response = await get('/api/ys/capture/history?limit=4')
    console.log('历史图片响应:', response)
    
    if (response && Array.isArray(response)) {
      historyImages.value = response
    } else if (response && Array.isArray(response.data)) {
      historyImages.value = response.data
    } else {
      console.error('获取历史图片返回格式错误:', response)
      historyImages.value = []
    }
  } catch (error) {
    console.error('获取历史图片失败:', error)
    historyImages.value = []
  }
}

// 修改显示大图
const showFullImage = (img) => {
  if (img && img.imageUrl) {
    captureInfo.value = {
      url: img.imageUrl,
      time: formatTime(img.timestamp || new Date())
    }
  }
}

// 修改时间格式化
const formatTime = (time) => {
  if (!time) return ''
  try {
    // 处理后端返回的 CST 时间格式
    if (typeof time === 'string' && time.includes('CST')) {
      return dayjs(new Date(time)).format('MM-DD HH:mm')
    }
    return dayjs(time).format('MM-DD HH:mm')
  } catch (e) {
    console.error('时间格式化错误:', e)
    return ''
  }
}

onMounted(() => {
  fetchHistoryImages()
})

const handleCapture = (data) => {
  console.log('抓拍返回数据:', data) // 添加日志
  if (data && data.picUrl) {
    captureInfo.value = {
      url: data.picUrl,
      time: data.time || dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
    // 抓拍成功后刷新历史图片
    fetchHistoryImages()
  }
}
</script>

<style lang="scss" scoped>
.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 5px;

  .video-box,
  .model-box {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px;
  }

  .video-box {
    display: flex;
    flex: 1;
    
    .video-feed {
      width: 100%;
      height: 100%;

      :deep(.hello-ezuikit-js) {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        
        #video-container {
          width: 100% !important;
          height: 100% !important;
          flex: 1;
          overflow: hidden;
          
          video {
            width: 100% !important;
            height: 100% !important;
            object-fit: fill;
          }
        }

        .control-buttons {
          margin-top: 4px;
          height: 35px;
          display: flex;
          justify-content: center;
          gap: 20px;
          padding: 2px 0;

          button {
            background: rgba(3, 211, 236, 0.1);
            border: 1px solid #03d3ec;
            color: #fff;
            padding: 2px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              background: rgba(3, 211, 236, 0.2);
            }
          }
        }
      }
    }
  }

  .model-box {
    flex: 0.8;
    
    .model-view {
      width: 100%;
      height: 100%;
      display: flex;
      gap: 10px;
      padding: 10px;

      .current-capture {
        width: 65%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .capture-image {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            max-width: 100%;
            max-height: 100%;
            width: auto !important;
            height: auto !important;
            object-fit: contain;
          }

          .capture-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            padding: 8px;
            text-align: center;

            .capture-time {
              color: #fff;
              font-size: 12px;
            }
          }
        }

        .no-capture {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          
          :deep(.el-empty) {
            padding: 40px 0;
          }
        }
      }

      .history-captures {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        // gap: 8px;
        padding: 8px;

        .history-title {
          font-size: 14px;
          color: #fff;
          padding: 4px 0;
          text-align: center;
          background: rgba(3, 211, 236, 0.1);
        }

        .history-list {
          flex: 1;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 10px;
          padding: 5px;
          overflow: hidden;
        

          .history-item {
            position: relative;
            cursor: pointer;
            border: 1px solid rgba(3, 211, 236, 0.2);
            transition: all 0.3s;
            width: 80%;
            height: 80%;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.2);

            &:hover {
              border-color: #03d3ec;
              transform: scale(1.02);
            }

            img {
              max-width: 100%;
              max-height: 100%;
              width: auto !important;
              height: auto !important;
              object-fit: contain;
            }

            .history-time {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(0, 0, 0, 0.5);
              padding: 2px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style> 